<template>
  <div style="height: 100%;">
    <div id="suidaoChart" style="width: 100%;height: 100%;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import homeService from "../../../../services/homeService";

export default {
  mounted() {
    this.initData();
  },

  methods: {
    drawYiChangChart() {
      // 基于准备好的dom，初始化echarts实例
      let suidaoChart = echarts.init(
        document.getElementById("suidaoChart"),
        "dark"
      );
      // window.onresize = yichangChart.resize;
      window.addEventListener("resize", () => {
        suidaoChart.resize();
      });
      // 绘制图表
      let option = {
        backgroundColor: '',
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: [
            "能见度",
            "温度",
            "湿度"
          ]
        },
        color: ['#18ACBA', '#C78402', '#B02B86', '#EED111', '#00A28A'],
        series: [
          {
            name: "隧道数量",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],

            label: {
              normal: {
                position: "inner"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 2, name: "郑州"},
              { value: 4, name: "洛阳" },
            ]
          },
          {
            name: "环境监测",
            type: "pie",
            radius: ["40%", "55%"],
            label: {
              normal: {
                // formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
                backgroundColor: "",
                borderColor: "",
                borderWidth: 1,
                borderRadius: 4,
                // shadowBlur:3,
                // shadowOffsetX: 2,
                // shadowOffsetY: 2,
                // shadowColor: '#999',
                // padding: [0, 7],
                rich: {
                  a: {
                    color: "#999",
                    lineHeight: 22,
                    align: "center"
                  },
                  // abg: {
                  //     backgroundColor: '#333',
                  //     width: '100%',
                  //     align: 'right',
                  //     height: 22,
                  //     borderRadius: [4, 4, 0, 0]
                  // },
                  hr: {
                    borderColor: "#aaa",
                    width: "100%",
                    borderWidth: 0.5,
                    height: 0
                  },
                  b: {
                    fontSize: 16,
                    lineHeight: 33
                  },
                  per: {
                    color: "#eee",
                    backgroundColor: "#334455",
                    padding: [2, 4],
                    borderRadius: 2
                  }
                }
              }
            },
            data: [
              { value: 2, name: "能见度" },
              { value: 4, name: "温度" },
              { value: 8, name: "湿度" }
            ]
          }
        ]
      };
      suidaoChart.setOption(option);
    },

    initData() {
      let _this = this;

      //初始化
      homeService.zixitongyichang().then(res => {
        if (res.code == 0) {
          _this.yAxis = [];
          _this.total = [];
          _this.fault = [];
          res.data.map(item => {
            _this.yAxis.push(item.facilityName);
            _this.total.push(item.count);
            _this.fault.push(item.faultCount);
          });
          _this.drawYiChangChart();
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
